<template>
  <navbar>
    <navbarItem path="/home" activeColor="blue">
      <img
        slot="item-icon"
        src="~assets/img/navbar/Home.svg"
        alt=""
        srcset=""
      />
      <img
        slot="item-icon-active"
        src="~assets/img/navbar/Home-Active.svg"
        alt=""
        srcset=""
      />
      <div slot="item-text">Home</div>
    </navbarItem>
    <navbarItem path="/alarm" activeColor="blue">
      <img
        slot="item-icon"
        src="~assets/img/navbar/Alarm.svg"
        alt=""
        srcset=""
      />
      <img
        slot="item-icon-active"
        src="~assets/img/navbar/Alarm-Active.svg"
        alt=""
        srcset=""
      />
      <div slot="item-text">Alarm</div>
    </navbarItem>
    <navbarItem path="/utils" activeColor="blue">
      <img
        slot="item-icon"
        src="~assets/img/navbar/Utils.svg"
        alt=""
        srcset=""
      />
      <img
        slot="item-icon-active"
        src="~assets/img/navbar/Utils-Active.svg"
        alt=""
        srcset=""
      />
      <div slot="item-text">Utils</div>
    </navbarItem>
    <navbarItem path="/user" activeColor="blue">
      <img
        slot="item-icon"
        src="~assets/img/navbar/User.svg"
        alt=""
        srcset=""
      />
      <img
        slot="item-icon-active"
        src="~assets/img/navbar/User-Active.svg"
        alt=""
        srcset=""
      />
      <div slot="item-text">User</div>
    </navbarItem>
  </navbar>
</template>

<script>
import navbar from "@/components/navbar/navbar.vue";
import navbarItem from "@/components/navbar/navbarItem.vue";
export default {
  name: "mianNarbar",
  components: {
    navbar,
    navbarItem,
  },
};
</script>

<style>
</style>